<template>

    <div class="tools-header">
        <button class="openModalBtn" @click="addStudent">添加新学生</button>
        <button class="openModalBtn" @click="delSelectedStudent">删除选中学生</button>
        <div>
            <input v-model.trim="keywordnew" type="text" name="keyword" class="keyword" placeholder="Search by name" />
            <!-- <input v-model.trim="keyword" type="text" name="keyword" class="keyword" placeholder="Search by name" /> -->
            <button @click="generateSearchData" type="button" class="searchBtn">搜索</button>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import type { IStudent, PIStudent } from './userInfoForm4.vue';


const { keyword, userInfo } = defineProps<{
    keyword: string
    userInfo: IStudent
}>()


// 表单数据对象
const formData = ref<PIStudent>(userInfo)

const keywordnew = ref<string>(keyword)

// 定义事件发射器，用于发射保存事件
const emit = defineEmits<{
    (e: 'add', userInfo: IStudent): void
    (e: 'del', userInfo: IStudent): void
    (e: 'generateSearch', userInfo: IStudent): void
}>()


// 添加学生信息
const addStudent = () => {
    // 发射保存事件，携带表单数据
    emit('add', formData.value as IStudent)
}
// 删除选中学生信息
const delSelectedStudent = () => {
    // 发射保存事件，携带表单数据
    emit('del', formData.value as IStudent)
}
// 搜索学生信息
const generateSearchData = () => {
    // 发射保存事件，携带表单数据
    emit('generateSearch', formData.value as IStudent)
}





</script>

<style lang="scss" scoped>
@import '../style/demo1.scss';
</style>